<template>
	<view class="content">
		<view class='evaluate_title'>物流服务评价</view>
		<view class="evaluate_li" :key="index" v-for="(item,index) in evaluate">
			<view class='evaluate_li_l'>
			  <text class='name'>{{item.name}}</text>
			  <view @tap="starTap(index,indexs)"  class="star_li" :key="indexs" v-for="(items,indexs) in item.userStars">
				<image :src="items.star"></image>
			  </view>
			</view>
			<text class='pingjia-zi' >{{item.txt}}</text>
		</view>
		<textarea placeholder="说点什么吧···"></textarea>
		<view class='myads_but'>
			<button form-type="submit" class="push">提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				evaluate:[
				  { 
					name:'准时到达装货',
					userStars:[
					  { star: '../../../static/images/selected.png', txt: '差'},
					  { star: '../../../static/images/normal.png', txt: '一般' },
					  { star: '../../../static/images/normal.png', txt: '满意' },
					  { star: '../../../static/images/normal.png', txt: '较好' },
					  { star: '../../../static/images/normal.png', txt: '非常好'},
					],
					txt:'差'
				  },
				   { 
					name:'准时到达卸货',
					 userStars: [
					   { star: '../../../static/images/selected.png', txt: '差' },
					   { star: '../../../static/images/normal.png', txt: '一般' },
					   { star: '../../../static/images/normal.png', txt: '满意' },
					   { star: '../../../static/images/normal.png', txt: '较好' },
					   { star: '../../../static/images/normal.png', txt: '非常好' },
					 ],
					 txt: '差'
				  },
				  {
					name: '货物安全到达',
					userStars:[
					  { star: '../../../static/images/selected.png', txt: '差'},
					  { star: '../../../static/images/normal.png', txt: '一般' },
					  { star: '../../../static/images/normal.png', txt: '满意' },
					  { star: '../../../static/images/normal.png', txt: '较好' },
					  { star: '../../../static/images/normal.png', txt: '非常好'},
					],
					txt:'差'
				  }, 
				  {
					name: '服务态度',
					userStars: [
					  { star: '../../../static/images/selected.png', txt: '差' },
					  { star: '../../../static/images/normal.png', txt: '一般' },
					  { star: '../../../static/images/normal.png', txt: '满意' },
					  { star: '../../../static/images/normal.png', txt: '较好' },
					  { star: '../../../static/images/normal.png', txt: '非常好' },
					],
					txt: '差'
				  },
				]
			};
		},
		methods:{
			// 星星点击事件
			starTap(index,indexs) {
				let evaluate = this.evaluate;
				console.log(evaluate)
				for (let i = 0; i < evaluate.length; i++) {
				  for (let j = 0; j < evaluate[index].userStars.length;j++){
					if (j <= indexs) { // 小于等于index的是满心
					  evaluate[index].userStars[j].star = '../../../static/images/selected.png',
					  evaluate[index].txt = evaluate[index].userStars[indexs].txt
					} else { // 其他是空心
					  evaluate[index].userStars[j].star = '../../../static/images/normal.png'
					}
				  }
				}
				// 重新赋值就可以显示了
				this.evaluate = evaluate
			},
		}
	}
</script>

<style>
.evaluate_title{
  border-bottom: 1px solid #ececec;
  line-height: 70upx;
  margin-bottom: 50upx;
  font-weight: 600;
}
.content{
	padding: 0 40upx;
}
.evaluate_li_l image{
	height: 50upx;
	width: 50upx;
	display: inline-block;
}
.evaluate_li{
	display: flex;
	align-items: center;
	line-height: 85upx;
	justify-content: space-between;
}
.evaluate_li_l{
	display: flex;
	align-items: center;
}
.evaluate_li_l .name{
	width: 220upx;
}
.evaluate_li_l view{
	vertical-align:middle;
	height:85upx;
	line-height:50upx;
	text-align:center;
	width:60upx;
	display: table-cell;
}
.evaluate_li .pingjia-zi{
	width: 100upx;
	color: #a4a8b4;
}
.push{
	background: #ff5d76;
	border: none;
	width: 250upx;
	height: 70upx;
	line-height: 70upx;
	color: #fff;
	border-radius: 50upx;
	font-size: 34upx;
	margin: 150upx auto 0;
}
textarea{
  border: 1px solid #ececec;
  box-shadow: 3upx 5upx 8upx #eaeaea;
  width: 100%;
  font-size: 26upx;
  color: #a6a6a6;
  padding: 20upx;
  box-sizing: border-box;
  line-height: 45upx;
  margin-top: 50upx;
}
</style>
